<template>
    <div class="app-container">
        <h3>运输信息</h3>
        <el-form ref="truckCenter" :model="truckCenter" label-width="120px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="运输单号:">
                        <span>{{truckCenter.id}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车主名称:">
                        <span>{{truckCenter.mainDriverName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机号码:">
                        <span>{{truckCenter.mainDriverPhone}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="身份证号码:">
                        <span>{{truckCenter.mainDriverId}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="车牌号:">
                        <span>{{truckCenter.plateNumber}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆类型:">
                        <span>{{truckCenter.truckTypeName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆长度:">
                        <span>{{truckCenter.truckLength}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆体积:">
                        <span>{{truckCenter.maxVolume}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="车辆载重:">
                        <span>{{truckCenter.maxWeight}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="GPS状态:">
                        <span>{{truckCenter.gpsStatus}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="起点地址:">
                        <span>{{truckCenter.fromProvinceName}}{{truckCenter.fromCityName}}{{truckCenter.fromCountyName}}{{truckCenter.fromAddressDetail}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="目的地址:">
                        <span>{{truckCenter.toProvinceName}}{{truckCenter.toCityName}}{{truckCenter.toCountyName}}{{truckCenter.toAddressDetail}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="支付方式:">
                        <span>{{truckCenter.payTypeName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="状态:">
                        <span>{{truckCenter.statusName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="创建时间:">
                        <span>{{truckCenter.createdDate}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h3>车辆图片</h3>
        <div>
            <div class="block" v-for="truckCenterImage in truckCenterImageList" :key="truckCenterImage.id">
                <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                     @click="showImg(truckCenterImage.imageUrl)">
                    <img :src="truckCenterImage.imageUrl"
                         style="width:100%;height:100%;"/>
                </div>
            </div>
        </div>

        <h3 style="clear:left">委托信息</h3>
        <div v-if="orderCenterList !=null && orderCenterList.length>0">
            <el-table :data="orderCenterList">
                <el-table-column
                        prop="id"
                        label="委托单号"
                        width="180">
                    <template slot-scope="scope">
                        <a @click="showOrderDetail(scope.row.id)"><span>{{scope.row.id}}</span></a>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="shipperName"
                        label="货主名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="shipperPhone"
                        label="手机号码">
                </el-table-column>
                <el-table-column
                        prop="goodsName"
                        label="货物名称">
                </el-table-column>
                <el-table-column
                        prop="goodsTypeName"
                        label="货物类型">
                </el-table-column>
                <el-table-column
                        prop="goodsVolume"
                        label="货物体积">
                </el-table-column>
                <el-table-column
                        prop="goodsWeight"
                        label="货物重量">
                </el-table-column>
                <el-table-column
                        prop="ifPackage"
                        label="是否打包">
                </el-table-column>
            </el-table>
        </div>
        <el-form ref="orderCenter" v-else :model="orderCenter" label-width="120px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="委托单号:">
                        <a @click="showOrderDetail(orderCenter.id)"><span>{{orderCenter.id}}</span></a>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货主名称:">
                        <span>{{orderCenter.shipperName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货主手机号码:">
                        <span>{{orderCenter.shipperPhone}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="公司名称:">
                        <span>{{orderCenter.shipperPartyName}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="货物名称:">
                        <span>{{orderCenter.goodsName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货物类型:">
                        <span>{{orderCenter.goodsTypeName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货物体积:">
                        <span>{{orderCenter.goodsVolume}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货物重量:">
                        <span>{{orderCenter.goodsWeight}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="是否打包:">
                        <span>{{orderCenter.ifPackage}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="装货方式:">
                        <span>{{orderCenter.loadingWay}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="卸货方式:">
                        <span>{{orderCenter.unloadingWay}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="起点地址:">
                        <span>{{orderCenter.fromProvinceName}}{{orderCenter.fromCityName}}{{orderCenter.fromCountyName}}{{orderCenter.fromAddressDetail}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-row>-->
            <!--<el-col :span="6">-->
            <!--<el-form-item label="目的地址:">-->
            <!--<span>{{orderCenter.toProvinceName|orderCenter.toCityName|orderCenter.toCountyName|orderCenter.toAddressDetail}}</span>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-form-item label="装货时间:">-->
            <!--<span>{{orderCenter.loadingBeginTime}}</span>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-form-item label="截至时间:">-->
            <!--<span>{{orderCenter.loadingEndTime}}</span>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-form-item label="支付方式:">-->
            <!--<span>{{orderCenter.payTypeName}}</span>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <!--</el-row>-->
            <!--<el-row>-->
            <!--<el-col :span="6">-->
            <!--<el-form-item label="状态:">-->
            <!--<span>{{orderCenter.statusName}}</span>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-form-item label="创建时间:">-->
            <!--<span>{{orderCenter.createdDate}}</span>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <!--</el-row>-->
        </el-form>
        <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
            <div class="viewImg">
                <img :src="imgUrl" style="width:100%;height: auto">
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {  } from 'element-ui';
  import {selectTruckCenterDetail} from '@/api/truckCenterApi';
  export default {
    name: 'detail',
    data(){
      return{
        orderCenterList:[
          {id:'1',mainDriverName:'里斯'},
          {id:'2',mainDriverName:'里斯b'},
        ],
        orderCenter:{
          id:1,
        },
        truckCenterImageList:[
          {id:'2',imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574736206494&di=f46d29560423d61ee33f29841b32252a&imgtype=0&src=http%3A%2F%2Fmemberpic.114my.cn%2Fdgdhly%2Fuploadfile%2Fimage%2F20161223%2F20161223162928_1485915119.jpg'},
          {id:'3',imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574736206494&di=f46d29560423d61ee33f29841b32252a&imgtype=0&src=http%3A%2F%2Fmemberpic.114my.cn%2Fdgdhly%2Fuploadfile%2Fimage%2F20161223%2F20161223162928_1485915119.jpg'},
          {id:'4',imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574736206494&di=f46d29560423d61ee33f29841b32252a&imgtype=0&src=http%3A%2F%2Fmemberpic.114my.cn%2Fdgdhly%2Fuploadfile%2Fimage%2F20161223%2F20161223162928_1485915119.jpg'}
        ],
        truckCenter:{},
        imgUrl:'',
        dialogImgFormVisible:false,
      }
    },
    methods:{
      showOrderDetail(orderCenterId){
        sessionStorage.setItem("orderCenterId",orderCenterId);
        this.$router.push("/truckorder/ordercenterdetail")
      },
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
    },
    mounted() {
      let truckCenterId = sessionStorage.getItem('truckCenterId')
      // sessionStorage.removeItem('truckCenterId')
      selectTruckCenterDetail(truckCenterId).then(response => {
        if (!response.hasError) {
          const { result = {} } = response
          const { orderTruckImageList = [], orderCenterList = [] } = result
          // this.truckCenterImageList = orderTruckImageList
          if (orderCenterList && orderCenterList.length > 0) {
            this.orderCenter = orderCenterList[0]
          }
          this.truckCenter = result
        }
      })
    }
  }
</script>

<style scoped>

</style>
